<template>
  <div
    style="border-bottom: 1px solid #eee; padding: 10px 0"
    class="header-cls"
  >
    <el-button-group style="margin-right: 20px">
      <el-button
        type="primary"
        :disabled="disabled"
        size="mini"
        icon="el-icon-plus"
        @click="userDrawer = true"
        >新增人员</el-button>
      <el-button
        type="primary"
        :disabled="disabled"
        size="mini"
        icon="el-icon-user-solid"
        @click="exportUsers()"
        >导出</el-button>
      <!-- <el-button
        type="primary"
        :disabled="disabled"
        size="mini"
        icon="el-icon-plus"
        @click="departmentDialog = true"
        >新增部门</el-button
      > -->
    </el-button-group>
    <el-dropdown trigger="click" @command="importDialog = true">
      <span class="el-dropdown-link">
        更多功能 <i class="el-icon-setting el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item icon="el-icon-plus">导入组织及人员</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <el-dialog
      title="导入excel"
      :visible.sync="importDialog"
      width="30%"
      @closed="importDialogClosed"
      style="text-align: center"
    >
      <el-upload
        ref="upload"
        action="#"
        :file-list.sync="fileList"
        :auto-upload="false"
        accept=".xlsx"
        :multiple="false"
      >
        <el-button slot="trigger" size="small" type="primary"
          >选取文件</el-button
        >
        <el-button
          style="margin-left: 10px"
          size="small"
          type="success"
          @click="submitUpload"
          >上传到服务器</el-button
        >
        <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div>
      </el-upload>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="importDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitUpload">确 定</el-button>
      </span> -->
    </el-dialog>

    <el-drawer
      title="新增人员"
      :visible.sync="userDrawer"
      direction="rtl"
      ref="userDrawer"
      :destroy-on-close="true"
      :wrapperClosable="false"
      :withHeader="false"
      :before-close="userClose"
    >
      <div class="drawer__content">
        <el-form
          ref="userform"
          :model="userform"
          :rules="userRules"
          label-position="left"
        >
          <el-form-item label="所属组织" label-width="80px">
            <el-input disabled :value="parentName"></el-input>
          </el-form-item>
          <el-form-item label="姓名" label-width="80px" prop="fullName">
            <el-input v-model="userform.fullName"></el-input>
          </el-form-item>
          <el-form-item label="性别" label-width="80px" prop="gender">
            <el-radio-group v-model="userform.gender">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="手机号" label-width="80px" prop="phoneNumber">
            <el-input v-model="userform.phoneNumber"></el-input>
          </el-form-item>
          <el-form-item label="员工类别" label-width="80px" prop="userType">
            <el-select v-model="userform.userType" placeholder="请选择员工类别">
              <el-option label="在编" :value="0"></el-option>
              <el-option label="聘用" :value="1"></el-option>
              <el-option label="劳务派遣" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="岗位名称" label-width="80px" prop="postName">
            <el-input v-model="userform.postName"></el-input>
          </el-form-item>
          <el-form-item label="职称" label-width="80px" prop="title">
            <el-input v-model="userform.title"></el-input>
          </el-form-item>
          <el-form-item label="" label-width="80px">
            <el-button @click="$refs.userDrawer.closeDrawer()">取 消</el-button>
            <el-button type="primary" @click="userSubmit" :loading="loading">
              {{ loading ? '提交中 ...' : '确 定' }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  importExcel,
  addUser,
  addDepartment,
  maxSort,
} from '@/api/organization'
const userForm = {
  fullName: '',
  gender: 1,
  phoneNumber: '',
  userType: 0,
  postName: '',
  title: '',
}
export default {
  props: {
    type: {
      type: String,
      default: undefined,
    },
    selectName: {
      type: String,
      default: '',
    },
    selectId: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    disabled() {
      return this.type === 'user' || !this.type
    },
    parentName() {
      return this.selectName
    },
  },
  data() {
    return {
      fileList: [],
      importDialog: false,
      userDrawer: false,
      departmentDrawer: false,
      loading: false,
      userform: Object.assign({}, userForm),
      userRules: {
        fullName: [
          { required: true, message: '请输入用户姓名', trigger: 'blur' },
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'blur' },
        ],
        phoneNumber: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
        ],
        userType: [
          { required: true, message: '请选择员工类别', trigger: 'blur' },
        ],
        postName: [
        ],
        title: [
        ]
      },
    }
  },
  mounted() {
    Object.assign(this.userform, userForm)
  },
  methods: {
    async submitUpload(e) {
      let formdata = new FormData()
      let files = this.$refs.upload.uploadFiles
      if (files.length === 0) {
        this.$message({
          message: '请上传导入文件',
          type: 'error',
        })
        return
      }
      formdata.append('file', files[0].raw)
      let { data } = await importExcel(formdata)
    },
    importDialogClosed() {
      this.$refs.upload.clearFiles()
    },
    userClose(done) {
      // Object.assign(this.userform, userForm)
      this.resetForm('userform')
      done()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    userSubmit() {
      if (this.loading) return
      this.loading = true
      this.$refs['userform'].validate(async (valid) => {
        if (!valid) {
          this.loading = false
          return false
        }
        let {data} = await addUser(Object.assign({ departmentId: this.selectId }, this.userform))
        this.$message.success('新增成功')
        this.$refs.userDrawer.closeDrawer()
        this.loading = false
      })
    },
    departmentSubmit() {},
    exportUsers() {

      window.open(`http://localhost:5000/api/organization/deptUsers/${this.selectId}`)
    }
  },
}
</script>

<style lang="scss" scoped>
.header-cls {
  .el-drawer__header {
    span {
      text-align: left;
    }
  }
}
.btn-func {
  width: 100%;
  padding: 10px;
}
.el-dropdown {
  cursor: pointer;
}
.drawer__content {
  padding: 20px 10px;
  text-align: left;
}
</style>
